<template>
  <div class="login">
    <div class="loginWrap">
      <div class="loginArea">
        <div class="loginTop">
          <div class="logo">
            <img @click="debugMode" class="logoImg" :src="require('../assets/images/logo_login.png')"><br/>
            <span class="logoText">睿翼智慧酒吧 - 老板助手</span>
          </div>
        </div>
        <div class="loginContent">
          <group class="loginInput" title="账号">
            <x-input type="text" autofocus="autofocus" id="loginUsername" @keyup.enter.native="changeFocus('loginPassword')" v-model="username" placeholder="请输入手机号" :show-clear="true">
              <i slot="label" class='iconfont icon-loginuersicon'></i>
            </x-input>
          </group>
          <group class="loginInput" title="密码">
            <x-input type="password" id="loginPassword" @keyup.enter.native="changeFocus()" v-model="password" placeholder="请输入密码" :show-clear="true">
              <i slot="label" class='iconfont icon-mima3'></i>
            </x-input>
          </group>
          <div class="loginBtnArea">
            <x-button id="loginBtn" type="primary" @click.native="verify" :show-loading="pageLoadingStatus" :disabled="pageLoadingStatus" text="登 录"></x-button>
            <router-link class="forgetPass" :to="{path:'/password'}">忘记密码？</router-link>
          </div>
        </div><!--
        <div class="loginFooter">
          <p>CopyRight @2019 &nbsp;
            <a>深圳睿翼娱乐文化有限公司</a>&nbsp;&nbsp;<br>
            <a>建皓信息</a>
            &nbsp;&nbsp;提供技术支持
          </p>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
  import { Group,XInput,XButton,dateFormat } from 'vux'
  import {loginVerify} from '../api'
  import {message,setLocalStorage,Trim} from "../common/util";

  export default {
    name: 'login',
    components: {
      Group,
      XInput,
      XButton
    },
    data () {
      return {
        username:'',
        password:'',
        loadingStatus:false,
        clickTime:0
      }
    },
    computed:{
      pageLoadingStatus(){
        return this.$store.getters.getLoadingStatus
      }
    },
    methods:{
      debugMode(){
        this.clickTime++
        if (this.clickTime >= 2 && this.clickTime < 5){
          if(JSON.parse(localStorage.getItem('debugMode')))
            message({message: '再点' + (5 - this.clickTime) + '次退出开发者模式',type: 'info'})
          else
            message({message: '再点' + (5 - this.clickTime) + '次进入开发者模式',type: 'info'})
        }else if (this.clickTime >= 5) { //大于点击次数
          this.clickTime = 0
          localStorage.setItem('debugMode',!JSON.parse(localStorage.getItem('debugMode')))
          if(JSON.parse(localStorage.getItem('debugMode')))
            message({message: '已进入开发者模式：请刷新系统以显示vconsole',type: 'info',time:3500})
          else
            message({message: '已退出开发者模式：请刷新系统以关闭vconsole',type: 'info',time:3500})
        }
      },
      changeFocus(val){
        if(val == null) {document.getElementById('loginBtn').focus();this.verify();}
        else document.getElementById(val).getElementsByTagName('input')[0].focus()
      },
      verify(){
        this.loadingStatus = true
        if (this.checkName() && this.checkPwd()){// 判断账户密码
          let reqParams = {
            username: Trim(this.username),
            password: this.password,
            openId: sessionStorage.getItem('openid')
          }
          loginVerify(reqParams).then((data)=>{
            //console.log("loginVerify返回的值：",data)
            let {msg, status, token, userId} = data
            if(status == 'success'){
              let expire = 10*60*60*1000//单位为毫秒
              setLocalStorage('token_boss_index' + sessionStorage.getItem('index'), token, expire)
              setLocalStorage('userId_boss_index' + sessionStorage.getItem('index'), userId, expire)
              this.$router.push({path:'/'})
            }else if(status == 'error'){
              this.changeFocus('loginUsername')
              message({message: msg,type: 'error'})
              this.loadingStatus = false
            }
          }).catch((err)=>{console.log('loginVerify catch info:',err);this.loadingStatus = false})
        }
      },
      checkName(){//验证用户名是否为空及只能为数字
        var myReg = /^[0-9]*$/;
        if(this.username == ""){
          message({message:'用户名不能为空，请输入用户名！',type: 'error'})
          this.loadingStatus = false
          this.changeFocus('loginUsername')
          return false;
        /*}else if (!myReg.test(this.username)) {
          message({message:'用户名请输入数字！',type: 'error'})
          this.loadingStatus = false
          this.changeFocus('loginUsername')
          return false;*/
        }else{
          return true;
        }
      },
      checkPwd(){//验证密码是否为空
        if(this.password == ""){
          message({message:'密码不能为空，请输入密码！',type: 'error'})
          this.loadingStatus = false
          this.changeFocus('loginPassword')
          return false;
        }else{
          return true;
        }
      }
    },
    mounted(){
      this.$store.commit('updateLoadingStatus',{isLoading:false})
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    height:100%;background:url(../assets/images/loginBg.jpg) repeat 0 0;
    .loginWrap{
      display: flex;justify-content: center;padding-top: 2rem;
      .loginArea{
        background:url(../assets/images/bg-white-lock.png) repeat 0 0;border-radius:0.5rem;width:18rem;padding:0 1.5rem 1rem;margin:0 1.5rem;box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.12);border-bottom: 1px solid rgba(50,50,50,0.33);
        .loginTop{
          padding-top:1rem;width:100%;text-align:center;
          .logo{
            margin:0 auto;color:#fff;font-weight:bold;
            .logoImg{vertical-align:middle;height:6rem;}
            .logoText{font-size:1.4rem;line-height:2.5rem;}
          }
        }
        .loginContent{
          width:100%;
          .loginInput{
            .iconfont{font-size:1.3rem;margin-right: 1rem;}
          }
          .loginBtnArea{
            margin-top:2rem;text-align: right;
            .loginBtn{width:100%;margin:1.5rem 0 0;font-weight: bold;}
            .forgetPass{line-height:2.5rem;color: #fff;}
          }
        }
        /*
        .loginFooter{
          border-top: 2px solid #D4D4D4;width:100%;min-width:250px;height:44px;padding:10px 0;
          p{text-align:center;line-height:22px;font-size:13px;font-family:"微软雅黑";}
        }*/
      }
    }
  }
</style>
